import { defineStore } from "pinia";
import { computed, reactive, ref, toRefs } from "vue";
import apis from '@/apis/index';

/**
 * 员工分析-页面-共享数据仓库
 */
export const useDashboradStore = defineStore("dashborad", () => {
  // 员工分析数据
  const isLoading = ref(true);
  const staffTotalRef = ref(0);
  const onboardingTimeObj = reactive({
    ltOne: 0,
    two: 0,
    gteThree: 0,
  });
  const { ltOne, two, gteThree } = toRefs(onboardingTimeObj);
  //
  const oldStaffListRef = ref([]);
  //
  const educationListRef = ref([]);
  const genderListRef = ref([]);
  const marriageListRef = ref([]);
  // 
  const ageListRef = ref([]);
  const departmentListRef = ref([]);
  const averageAgeListRef = ref({});
  // 
  const constellationListRef = ref([]);

  const staffAnalyseData = reactive({
    onboardingTimeData:[
      { title: '总人数', amount: staffTotalRef, styleData: { width: '100%', height: '170px' } },
      { title: '入职1年内员工数', amount: ltOne, styleData: { width: '33%', height: '170px' } },
      { title: '入职2年内员工数', amount: two, styleData: { width: '33%', height: '170px' } },
      { title: '入职3年内员工数', amount: gteThree, styleData: { width: '33%', height: '170px' } },
    ],
    // 工龄最大的十名员工列表
    oldStaffListData: {
      title: '工龄最大的十名员工',
      oldStaffList: oldStaffListRef,
      styleData: {
        width: '49.8%',
        height: '350px'
      }
    },
    // 饼状图数据
    pieChartData: [
      { id: 'education-chart', title: '学历情况', listData: educationListRef, styleData: { width: '49.8%', height: '350px' } },
      { id: 'gender-chart', title: '员工性别比例', listData: genderListRef, styleData: { width: '49.8%', height: '350px' } },
      { id: 'marriage-chart', title: '员工婚姻状况', listData: marriageListRef, styleData: { width: '49.8%', height: '350px' } },
    ],
    // 柱状图
    barChartData: [
      { id: 'age-chart', title: '员工年龄段', listData: ageListRef, styleData: { width: '49.8%', height: '350px' } },
      { id: 'department-chart', title: '部门员工数量', listData: departmentListRef, styleData: { width: '49.8%', height: '350px' } },
      { id: 'average-chart', title: '员工平均年龄', listData: averageAgeListRef, styleData: { width: '49.8%', height: '350px' } },
    ],
    // 星座数据
    constellationData: {
      id: 'constellation-chart', 
      title: '员工星座分布', 
      listData: constellationListRef, 
      styleData: { 
        width: '49.8%', 
        height: '350px' 
      }
    }
  });

  // 更新状态数据
  async function updateState(data: any) {
    staffTotalRef.value = data.staffTotal;
    Object.assign(onboardingTimeObj, {...data.onboardingTimeData});
    oldStaffListRef.value = data.wordingYearsMap;
    // 更新饼状图数据
    educationListRef.value = data.educationList;
    genderListRef.value = data.genderList;
    marriageListRef.value = data.marriageList;
    // 更新柱状图数据
    ageListRef.value = data.ageList;
    departmentListRef.value = data.departmentList;
    averageAgeListRef.value = {
      xData: [data.genderList[0]?.name, data.genderList[1]?.name],
      yData: [data.genderList[0]?.average, data.genderList[1]?.average]
    },
    // 更新星座分布数据
    constellationListRef.value = data.constellationList;
  }
  // 请求-获取员工分析数据
  const getStaffAnalyseData = async () => {
    try {
      const data = await apis.dashborad.getStaffAnalyse_API();
      if (data) {
        // 更新状态
        await updateState(data);
        setTimeout(() => {
          isLoading.value = false;
        }, 1500);
      }
      console.log(data,'data');
    } catch (error) {
      console.log(error,'请求-获取员工分析数据失败-pinia');
      return;
    }
  }

  return {
    isLoading,
    staffAnalyseData,
    getStaffAnalyseData,
  }
// }
// , {
  // persist: {
  //   enabled: true,
  //   strategies: [
  //     {
  //       key: 'isLoading',
  //       storage: sessionStorage,
  //       paths: ['isLoading']
  //     },
  //     {
  //       key: 'staffAnalyseData',
  //       storage: sessionStorage,
  //       paths: ['staffAnalyseData']
  //     }
  //   ]
  // }
});